<template>
  <div class="news-website">
    <!-- Top header -->
    <div class="top-header">
      <div class="container">
        <div class="search-section">
          <t-icon name="search" />
        </div>

        <div class="auth-section">
          <t-button variant="text" shape="square" class="theme-btn" @click="toggleTheme">
            <template #icon>
              <t-icon :name="isDarkMode ? 'sunny' : 'moon'" />
            </template>
          </t-button>
          <template v-if="!isLoggedIn">
            <t-button variant="outline" class="login-btn" @click="showLoginDialog = true">LOG IN</t-button>
          </template>
          <template v-else>
            <div class="avatar-wrapper">
              <img src="https://s1.mintiny.com/wlake/i/2025/03/13/vqsx.jpg" alt="User Avatar" class="user-avatar" />
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- 登录对话框 -->
    <login-dialog :visible="showLoginDialog" @update:visible="showLoginDialog = $event" @login-success="handleLoginSuccess" />

    <!-- Date and paper info -->
    <div class="date-section container">
      <div class="date-info">
        <div>Friday, April 11, 2025</div>
        <div>Today's Paper</div>
      </div>
      <div class="logo-section">
        <h1 class="site-logo">News Reader</h1>
      </div>
      <div class="market-info">
        <span>Nasdaq</span>
        <span class="market-up">+0.7% ↑</span>
      </div>
    </div>

    <!-- Main navigation -->
    <t-affix :offset-top="-2" class="nav-affix">
      <div class="main-nav container">
        <t-head-menu expand-type="popup">
          <t-submenu value="level">
            <template #title>Difficulty Level</template>
            <t-menu-item value="Level1">Level 1</t-menu-item>
            <t-menu-item value="Level2">Level 2</t-menu-item>
            <t-menu-item value="Level3">Level 3</t-menu-item>
            <t-menu-item value="Level4">Level 4</t-menu-item>
            <t-menu-item value="Level5">Level 5</t-menu-item>
          </t-submenu>

          <t-submenu value="politics">
            <template #title>Political News</template>
            <t-submenu value="domestic" title="Domestic Politics">
              <t-menu-item value="policy">Government Policy</t-menu-item>
              <t-menu-item value="party">Party Dynamics</t-menu-item>
              <t-menu-item value="election">Elections & Voting</t-menu-item>
            </t-submenu>
            <t-submenu value="international" title="International Politics">
              <t-menu-item value="diplomacy">Diplomatic Relations</t-menu-item>
              <t-menu-item value="organizations">International Organizations</t-menu-item>
              <t-menu-item value="conflicts">Regional Conflicts</t-menu-item>
            </t-submenu>
            <t-submenu value="law" title="Law & Justice">
              <t-menu-item value="legislation">Legislative Updates</t-menu-item>
              <t-menu-item value="cases">Legal Cases</t-menu-item>
              <t-menu-item value="constitution">Constitutional Amendments</t-menu-item>
            </t-submenu>
          </t-submenu>

          <t-submenu value="economy">
            <template #title>Economic News</template>
            <t-submenu value="macro" title="Macro Economy">
              <t-menu-item value="gdp">GDP & Growth</t-menu-item>
              <t-menu-item value="inflation">Inflation</t-menu-item>
              <t-menu-item value="employment">Employment & Unemployment</t-menu-item>
            </t-submenu>
            <t-submenu value="industry" title="Industrial Economy">
              <t-menu-item value="manufacturing">Manufacturing</t-menu-item>
              <t-menu-item value="service">Service Industry</t-menu-item>
              <t-menu-item value="agriculture">Agricultural Economy</t-menu-item>
            </t-submenu>
            <t-submenu value="finance" title="Financial Markets">
              <t-menu-item value="stock">Stock Market</t-menu-item>
              <t-menu-item value="bond">Bond Market</t-menu-item>
              <t-menu-item value="forex">Foreign Exchange</t-menu-item>
            </t-submenu>
          </t-submenu>

          <t-submenu value="tech">
            <template #title>Technology News</template>
            <t-submenu value="it" title="Information Technology">
              <t-menu-item value="5g">5G Communications</t-menu-item>
              <t-menu-item value="security">Cybersecurity</t-menu-item>
              <t-menu-item value="cloud">Cloud Computing</t-menu-item>
            </t-submenu>
            <t-submenu value="ai" title="Artificial Intelligence">
              <t-menu-item value="nlp">Natural Language Processing</t-menu-item>
              <t-menu-item value="cv">Computer Vision</t-menu-item>
              <t-menu-item value="autonomous">Autonomous Driving</t-menu-item>
            </t-submenu>
            <t-submenu value="biotech" title="Biotechnology">
              <t-menu-item value="gene">Gene Editing</t-menu-item>
              <t-menu-item value="vaccine">Vaccine Development</t-menu-item>
              <t-menu-item value="synthetic">Synthetic Biology</t-menu-item>
            </t-submenu>
          </t-submenu>

          <t-submenu value="culture">
            <template #title>Cultural News</template>
            <t-submenu value="traditional" title="Traditional Culture">
              <t-menu-item value="heritage">Intangible Cultural Heritage</t-menu-item>
              <t-menu-item value="folklore">Folk Activities</t-menu-item>
              <t-menu-item value="archaeology">Historical Archaeology</t-menu-item>
            </t-submenu>
            <t-submenu value="popular" title="Popular Culture">
              <t-menu-item value="entertainment">Entertainment</t-menu-item>
              <t-menu-item value="internet">Internet Culture</t-menu-item>
              <t-menu-item value="faneconomy">Fan Economy</t-menu-item>
            </t-submenu>
            <t-submenu value="arts" title="Arts & Literature">
              <t-menu-item value="exhibition">Art Exhibitions</t-menu-item>
              <t-menu-item value="literature">Literary Awards</t-menu-item>
              <t-menu-item value="theater">Theater & Dance</t-menu-item>
            </t-submenu>
          </t-submenu>

          <t-submenu value="society">
            <template #title>Social News</template>
            <t-submenu value="livelihood" title="People's Livelihood">
              <t-menu-item value="welfare">Social Security</t-menu-item>
              <t-menu-item value="housing">Housing & Real Estate</t-menu-item>
              <t-menu-item value="education">Education Reform</t-menu-item>
            </t-submenu>
            <t-submenu value="safety" title="Public Safety">
              <t-menu-item value="disaster">Natural Disasters</t-menu-item>
              <t-menu-item value="accident">Accidents & Rescue</t-menu-item>
              <t-menu-item value="health">Public Health Events</t-menu-item>
            </t-submenu>
            <t-submenu value="phenomena" title="Social Phenomena">
              <t-menu-item value="aging">Population Aging</t-menu-item>
              <t-menu-item value="urbanization">Urbanization Issues</t-menu-item>
              <t-menu-item value="gender">Gender Equality</t-menu-item>
            </t-submenu>
          </t-submenu>

          <t-submenu value="sports">
            <template #title>Sports News</template>
            <t-submenu value="competitive" title="Competitive Sports">
              <t-menu-item value="olympics">Olympics</t-menu-item>
              <t-menu-item value="worldcup">World Cup</t-menu-item>
              <t-menu-item value="leagues">Professional Leagues</t-menu-item>
            </t-submenu>
            <t-submenu value="mass" title="Mass Sports">
              <t-menu-item value="marathon">Marathon Events</t-menu-item>
              <t-menu-item value="fitness">Fitness Trends</t-menu-item>
              <t-menu-item value="campus">Campus Sports</t-menu-item>
            </t-submenu>
            <t-submenu value="industry" title="Sports Industry">
              <t-menu-item value="broadcast">Broadcasting Rights</t-menu-item>
              <t-menu-item value="sponsor">Sports Sponsorship</t-menu-item>
              <t-menu-item value="esports">E-sports Industry</t-menu-item>
            </t-submenu>
          </t-submenu>

          <!-- <t-submenu value="health">
            <template #title>Health & Medical</template>
            <t-submenu value="public" title="Public Health">
              <t-menu-item value="epidemic">Epidemic Prevention</t-menu-item>
              <t-menu-item value="vaccination">Vaccination</t-menu-item>
              <t-menu-item value="chronic">Chronic Disease Management</t-menu-item>
            </t-submenu>
            <t-submenu value="medical" title="Medical Technology">
              <t-menu-item value="telemedicine">Telemedicine</t-menu-item>
              <t-menu-item value="robot">Surgical Robots</t-menu-item>
              <t-menu-item value="gene-therapy">Gene Therapy</t-menu-item>
            </t-submenu>
          </t-submenu>

          <t-submenu value="education">
            <template #title>Education & Research</template>
            <t-submenu value="basic" title="Basic Education">
              <t-menu-item value="curriculum">Curriculum Reform</t-menu-item>
              <t-menu-item value="equity">Educational Equity</t-menu-item>
              <t-menu-item value="online">Online Education</t-menu-item>
            </t-submenu>
            <t-submenu value="higher" title="Higher Education">
              <t-menu-item value="ranking">University Rankings</t-menu-item>
              <t-menu-item value="research">Academic Research</t-menu-item>
              <t-menu-item value="international">International Student Policy</t-menu-item>
            </t-submenu>
          </t-submenu> -->
        </t-head-menu>
      </div>
    </t-affix>

    <!-- Main content -->
    <div class="main-content container">
      <div class="content-grid">
        <!-- Main news section -->
        <div class="main-news-section">
          <div class="news-content">
            <div class="text-content">
              <article class="main-article" @click="goToArticle('main-1')">
                <h2 class="article-title">Former Bank of Canada Chief Wins Race to Lead Liberal Party, and Canada</h2>
                <p class="article-summary">
                  Mark Carney will replace Justin Trudeau as party leader and the country's prime minister amid threats from the U.S. He's expected to quickly call a federal election.
                </p>
                <p class="article-summary">
                  The former central banker's victory marks a significant shift in Canadian politics, as he brings his extensive economic expertise to the role of prime minister at a crucial time for the country.
                </p>
                <div class="article-meta">4 MIN READ</div>
              </article>

              <article class="secondary-article" @click="goToArticle('secondary-1')">
                <h3 class="article-title">Will Canadians Warm Up to Mark Carney?</h3>
                <p class="article-summary">
                  Despite his impressive credentials, some voters remain skeptical of the former banker's ability to connect with ordinary Canadians.
                </p>
                <div class="article-meta">5 MIN READ</div>
              </article>

              <div class="topic-tags">
                <span class="topic-tag">Canadian Politics</span>
                <span class="topic-tag">Leadership Change</span>
                <span class="topic-tag">Economic Policy</span>
                <span class="topic-tag">Federal Election</span>
                <span class="topic-tag">Liberal Party</span>
                <span class="topic-tag">Political Analysis</span>
              </div>

              <!-- 添加新的内容区块 -->
              <div class="featured-insights">
                <h4 class="section-title">FEATURED INSIGHTS</h4>
                <div class="insights-grid">
                  <article class="insight-card" @click="goToArticle('insight-1')">
                    <img src="https://s1.mintiny.com/wlake/i/2025/03/31/741ph.png" alt="Global Economy" class="insight-image" />
                    <div class="insight-content">
                      <div class="section-label">GLOBAL ECONOMY</div>
                      <h3 class="article-title">The New Economic Order: Asia's Rising Influence</h3>
                      <p class="article-summary">How shifting global dynamics are reshaping international trade and finance</p>
                      <div class="article-meta">
                        <span class="read-time">10 MIN READ</span>
                        <span class="article-type">ANALYSIS</span>
                      </div>
                    </div>
                  </article>
                </div>
              </div>

              <div class="market-updates">
                <h4 class="section-title">MARKET UPDATES</h4>
                <div class="market-grid">
                  <div class="market-card">
                    <div class="market-header">
                      <span class="market-name">S&P 500</span>
                      <span class="market-change positive">+1.2% ↑</span>
                    </div>
                    <div class="market-chart">
                      <img src="https://s1.mintiny.com/wlake/i/2025/03/31/742hb.png" alt="Market Chart" class="chart-image" />
                    </div>
                  </div>
                  <div class="market-card">
                    <div class="market-header">
                      <span class="market-name">Bitcoin</span>
                      <span class="market-change negative">-2.5% ↓</span>
                    </div>
                    <div class="market-chart">
                      <img src="https://s1.mintiny.com/wlake/i/2025/03/31/10kxa.png" alt="Crypto Chart" class="chart-image" />
                    </div>
                  </div>
                </div>
              </div>

              <div class="tech-trends">
                <h4 class="section-title">TECH TRENDS</h4>
                <div class="trends-grid">
                  <article class="trend-card" @click="goToArticle('trend-1')">
                    <img src="https://s1.mintiny.com/wlake/i/2025/03/31/7450i.png" alt="AI Development" class="trend-image" />
                    <div class="trend-content">
                      <h3 class="article-title">The Rise of Generative AI in Enterprise</h3>
                      <p class="article-summary">How businesses are leveraging AI to transform operations</p>
                    </div>
                  </article>
                  <article class="trend-card" @click="goToArticle('trend-2')">
                    <img src="https://s1.mintiny.com/wlake/i/2025/03/31/10lcd.png" alt="Quantum Computing" class="trend-image" />
                    <div class="trend-content">
                      <h3 class="article-title">Quantum Computing: The Next Frontier</h3>
                      <p class="article-summary">Breaking down the latest advances in quantum technology</p>
                    </div>
                  </article>
                </div>
              </div>

              <!-- 添加深度报道区块 -->
              <div class="in-depth-reports">
                <h4 class="section-title">IN-DEPTH REPORTS</h4>
                <div class="reports-grid">
                  <article class="report-card large" @click="goToArticle('report-1')">
                    <img src="https://s1.mintiny.com/wlake/i/2025/03/31/587d.png" alt="Global Trade" class="report-image" />
                    <div class="report-content">
                      <div class="section-label">GLOBAL TRADE</div>
                      <h3 class="article-title">The Future of Global Commerce: A New Era Begins</h3>
                      <p class="article-summary">
                        An extensive investigation into how digital transformation and geopolitical shifts are reshaping international trade patterns
                      </p>
                      <div class="article-meta">
                        <span class="read-time">20 MIN READ</span>
                        <span class="article-type">SPECIAL REPORT</span>
                      </div>
                    </div>
                  </article>
                  
                  <div class="sub-reports">
                    <article class="report-card" @click="goToArticle('report-2')">
                      <img src="https://s1.mintiny.com/wlake/i/2025/03/31/5870.png" alt="Supply Chain" class="report-image" />
                      <div class="report-content">
                        <div class="section-label">SUPPLY CHAIN</div>
                        <h3 class="article-title">Reimagining Supply Chains for the Digital Age</h3>
                        <p class="article-summary">How companies are using technology to build resilient supply networks</p>
                      </div>
                    </article>
                    
                    <article class="report-card" @click="goToArticle('report-3')">
                      <img src="https://s1.mintiny.com/wlake/i/2025/03/31/1dt8tc.png" alt="Digital Economy" class="report-image" />
                      <div class="report-content">
                        <div class="section-label">DIGITAL ECONOMY</div>
                        <h3 class="article-title">The Rise of Digital Currencies</h3>
                        <p class="article-summary">Central banks and private sectors race to shape the future of money</p>
                      </div>
                    </article>
                  </div>
                </div>

                <div class="key-findings">
                  <h5 class="findings-title">KEY FINDINGS</h5>
                  <div class="findings-grid">
                    <div class="finding-item">
                      <span class="finding-number">01</span>
                      <div class="finding-content">
                        <h6>Digital Transformation</h6>
                        <p>85% of global trade now involves digital platforms</p>
                      </div>
                    </div>
                    <div class="finding-item">
                      <span class="finding-number">02</span>
                      <div class="finding-content">
                        <h6>Supply Chain Evolution</h6>
                        <p>Regional networks replacing global supply chains</p>
                      </div>
                    </div>
                    <div class="finding-item">
                      <span class="finding-number">03</span>
                      <div class="finding-content">
                        <h6>Financial Innovation</h6>
                        <p>Digital currencies reshaping cross-border payments</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <article class="main-article" @click="goToArticle('main-2')">
                <h2 class="article-title">Populist vs. Billionaire: Steve Bannon, Elon Musk and the Battle Within MAGA</h2>
                <p class="article-summary">
                  The hostility between the two men reveals the broader tensions within the Trump movement.
                </p>
                <p class="article-summary">
                  As the movement grapples with its future direction, the clash between traditional populism and tech-driven libertarianism becomes increasingly apparent.
                </p>
                <div class="article-meta">6 MIN READ</div>
              </article>

              <article class="secondary-article" @click="goToArticle('secondary-2')">
                <h3 class="article-title">The Evolution of MAGA: From Movement to Internal Conflict</h3>
                <p class="article-summary">
                  Experts analyze the growing divisions within the movement and what it means for its political future.
                </p>
                <div class="article-meta">7 MIN READ</div>
              </article>

              <!-- 深度分析区域 -->
              <div class="analysis-section">
                <h4 class="section-title">IN-DEPTH ANALYSIS</h4>
                <div class="analysis-grid">
                  <article class="analysis-card" @click="goToArticle('analysis-1')">
                    <div class="analysis-content">
                      <div class="section-label">POLITICAL LANDSCAPE</div>
                      <h3 class="article-title">The Changing Face of North American Politics</h3>
                      <p class="article-summary">
                        From Trudeau to Carney, Trump to DeSantis: How leadership transitions are reshaping the continent's political dynamics
                      </p>
                      <div class="article-meta">
                        <span class="read-time">12 MIN READ</span>
                        <span class="article-type">ANALYSIS</span>
                      </div>
                    </div>
                    <div class="analysis-stats">
                      <div class="stat-item">
                        <span class="stat-number">68%</span>
                        <span class="stat-label">Voter Interest</span>
                      </div>
                      <div class="stat-item">
                        <span class="stat-number">245</span>
                        <span class="stat-label">Expert Comments</span>
                      </div>
                    </div>
                  </article>

                  <article class="analysis-card" @click="goToArticle('analysis-2')">
                    <div class="analysis-content">
                      <div class="section-label">ECONOMIC IMPACT</div>
                      <h3 class="article-title">Market Response to Political Shifts</h3>
                      <p class="article-summary">
                        How global markets are adapting to new leadership and policy changes in North America
                      </p>
                      <div class="article-meta">
                        <span class="read-time">10 MIN READ</span>
                        <span class="article-type">DATA ANALYSIS</span>
                      </div>
                    </div>
                    <div class="analysis-stats">
                      <div class="stat-item">
                        <span class="stat-number">+2.4%</span>
                        <span class="stat-label">Market Impact</span>
                      </div>
                      <div class="stat-item">
                        <span class="stat-number">178</span>
                        <span class="stat-label">Data Points</span>
                      </div>
                    </div>
                  </article>
                </div>
              </div>

              <!-- 添加热点话题区域 -->
              <div class="hot-topics">
                <h4 class="section-title">HOT TOPICS</h4>
                <div class="topic-list">
                  <div class="topic-item">
                    <span class="topic-number">01</span>
                    <div class="topic-content">
                      <h3 class="topic-title">Canadian Economic Reform</h3>
                      <p class="topic-stats">2.5K discussions</p>
                    </div>
                  </div>
                  <div class="topic-item">
                    <span class="topic-number">02</span>
                    <div class="topic-content">
                      <h3 class="topic-title">Political Transition Impact</h3>
                      <p class="topic-stats">1.8K discussions</p>
                    </div>
                  </div>
                  <div class="topic-item">
                    <span class="topic-number">03</span>
                    <div class="topic-content">
                      <h3 class="topic-title">US-Canada Relations</h3>
                      <p class="topic-stats">1.2K discussions</p>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 添加视频专题区域 -->
              <div class="video-features">
                <h4 class="section-title">VIDEO FEATURES</h4>
                <div class="video-grid">
                  <article class="video-item" @click="goToArticle('video-1')">
                    <div class="video-thumbnail">
                      <img src="https://s1.mintiny.com/wlake/i/2025/03/31/587d.png" alt="Video Feature" class="video-image" />
                      <div class="video-duration">15:24</div>
                    </div>
                    <div class="video-content">
                      <div class="section-label">DOCUMENTARY</div>
                      <h3 class="article-title">Inside the Tech Revolution</h3>
                      <p class="article-summary">A behind-the-scenes look at how technology is reshaping our world</p>
                    </div>
                  </article>
                  <article class="video-item" @click="goToArticle('video-2')">
                    <div class="video-thumbnail">
                      <img src="https://s1.mintiny.com/wlake/i/2025/03/31/5870.png" alt="Video Feature" class="video-image" />
                      <div class="video-duration">12:38</div>
                    </div>
                    <div class="video-content">
                      <div class="section-label">INTERVIEW</div>
                      <h3 class="article-title">The Future of Work</h3>
                      <p class="article-summary">Leading experts discuss the changing landscape of employment</p>
                    </div>
                  </article>
                </div>
              </div>

              <!-- 添加深度访谈区域 -->
              <div class="interviews">
                <h4 class="section-title">IN-DEPTH INTERVIEWS</h4>
                <div class="interview-list">
                  <article class="interview-item" @click="goToArticle('interview-1')">
                    <img src="https://s1.mintiny.com/wlake/i/2025/03/31/741ph.png" alt="Interview" class="interview-image" />
                    <div class="interview-content">
                      <div class="section-label">TECH LEADERS</div>
                      <h3 class="article-title">AI Ethics and Society</h3>
                      <p class="article-summary">A conversation with leading AI researchers about the future of artificial intelligence</p>
                      <div class="interview-meta">
                        <span class="interview-length">45 MIN READ</span>
                        <span class="interview-type">EXCLUSIVE</span>
                      </div>
                    </div>
                  </article>
                  <article class="interview-item" @click="goToArticle('interview-2')">
                    <img src="https://s1.mintiny.com/wlake/i/2025/03/31/742hb.png" alt="Interview" class="interview-image" />
                    <div class="interview-content">
                      <div class="section-label">CLIMATE ACTION</div>
                      <h3 class="article-title">The Path to Net Zero</h3>
                      <p class="article-summary">Industry leaders share their vision for a sustainable future</p>
                      <div class="interview-meta">
                        <span class="interview-length">35 MIN READ</span>
                        <span class="interview-type">SERIES</span>
                      </div>
                    </div>
                  </article>
                </div>
              </div>

              <!-- 添加数据分析区域 -->
              <div class="data-insights">
                <h4 class="section-title">DATA INSIGHTS</h4>
                <div class="data-grid">
                  <article class="data-card" @click="goToArticle('data-1')">
                    <div class="data-visualization">
                      <img src="https://s1.mintiny.com/wlake/i/2025/03/31/10kxa.png" alt="Data Visualization" class="data-image" />
                    </div>
                    <div class="data-content">
                      <div class="section-label">ECONOMY</div>
                      <h3 class="article-title">Global Trade Patterns</h3>
                      <p class="article-summary">Analyzing the shifts in international commerce</p>
                      <div class="data-meta">
                        <span class="data-source">World Trade Organization</span>
                        <span class="data-update">Updated Today</span>
                      </div>
                    </div>
                  </article>
                  <article class="data-card" @click="goToArticle('data-2')">
                    <div class="data-visualization">
                      <img src="https://s1.mintiny.com/wlake/i/2025/03/31/10lcd.png" alt="Data Visualization" class="data-image" />
                    </div>
                    <div class="data-content">
                      <div class="section-label">TECHNOLOGY</div>
                      <h3 class="article-title">AI Investment Trends</h3>
                      <p class="article-summary">Tracking global investments in artificial intelligence</p>
                      <div class="data-meta">
                        <span class="data-source">Tech Investment Report</span>
                        <span class="data-update">Q1 2025</span>
                      </div>
                    </div>
                  </article>
                </div>
              </div>

              <!-- 添加观点专栏区域 -->
              <div class="opinion-columns">
                <h4 class="section-title">OPINION COLUMNS</h4>
                <div class="columns-grid">
                  <article class="column-item" @click="goToArticle('column-1')">
                    <div class="author-info">
                      <img src="https://s1.mintiny.com/wlake/i/2025/03/31/7450i.png" alt="Author" class="author-image" />
                      <div class="author-details">
                        <h5 class="author-name">Sarah Chen</h5>
                        <p class="author-title">Technology Analyst</p>
                      </div>
                    </div>
                    <div class="column-content">
                      <h3 class="article-title">The Real Cost of AI Development</h3>
                      <p class="article-summary">Why we need to consider the environmental impact of our AI ambitions</p>
                    </div>
                  </article>
                  <article class="column-item" @click="goToArticle('column-2')">
                    <div class="author-info">
                      <img src="https://s1.mintiny.com/wlake/i/2025/03/31/1d0dxk.png" alt="Author" class="author-image" />
                      <div class="author-details">
                        <h5 class="author-name">Michael Rodriguez</h5>
                        <p class="author-title">Economic Policy Expert</p>
                      </div>
                    </div>
                    <div class="column-content">
                      <h3 class="article-title">Rethinking Global Trade</h3>
                      <p class="article-summary">The case for a more sustainable and equitable trading system</p>
                    </div>
                  </article>
                </div>
              </div>
            </div>
            
            <div class="image-content">
              <t-swiper :autoplay="3000" :duration="300" :navigation="{ showSlideBtn: 'hover' }" class="featured-swiper">
                <t-swiper-item>
                  <div class="featured-image">
                    <img src="https://s1.mintiny.com/wlake/i/2025/03/31/q7u.png" alt="Mark Carney at Liberal Party podium" class="main-image" />
                    <div class="image-credit">Cole Burston for The New York Times</div>
                  </div>
                </t-swiper-item>
                <t-swiper-item>
                  <div class="featured-image">
                    <img src="https://s1.mintiny.com/wlake/i/2025/03/31/q8x.png" alt="Political rally scene" class="main-image" />
                    <div class="image-credit">Sarah Thompson for The New York Times</div>
                    <p class="image-caption">Supporters gather at the Liberal Party headquarters in Ottawa</p>
                  </div>
                </t-swiper-item>
                <t-swiper-item>
                  <div class="featured-image">
                    <img src="https://s1.mintiny.com/wlake/i/2025/03/31/53um.png" alt="MAGA Movement" class="main-image" />
                    <div class="image-credit">Michael Reynolds for The New York Times</div>
                    <p class="image-caption">The evolving dynamics within the MAGA movement</p>
                  </div>
                </t-swiper-item>
              </t-swiper>

              <!-- 添加相关新闻区域 -->
              <div class="related-news">
                <h4 class="section-title">RELATED COVERAGE</h4>
                <div class="related-news-grid">
                  <article class="related-news-item" @click="goToArticle('related-1')">
                    <div class="related-news-content">
                      <h3 class="article-title">The Economic Vision Behind Carney's Leadership</h3>
                      <div class="article-meta">
                        <span class="read-time">6 MIN READ</span>
                        <span class="article-type">ANALYSIS</span>
                      </div>
                    </div>
                  </article>
                  <article class="related-news-item" @click="goToArticle('related-2')">
                    <div class="related-news-content">
                      <h3 class="article-title">Global Markets React to Canadian Leadership Change</h3>
                      <div class="article-meta">
                        <span class="read-time">4 MIN READ</span>
                        <span class="article-type">MARKETS</span>
                      </div>
                    </div>
                  </article>
                </div>
              </div>

              <!-- 添加热点话题区域 -->
              <div class="hot-topics">
                <h4 class="section-title">HOT TOPICS</h4>
                <div class="topic-list">
                  <div class="topic-item">
                    <span class="topic-number">01</span>
                    <div class="topic-content">
                      <h3 class="topic-title">Canadian Economic Reform</h3>
                      <p class="topic-stats">2.5K discussions</p>
                    </div>
                  </div>
                  <div class="topic-item">
                    <span class="topic-number">02</span>
                    <div class="topic-content">
                      <h3 class="topic-title">Political Transition Impact</h3>
                      <p class="topic-stats">1.8K discussions</p>
                    </div>
                  </div>
                  <div class="topic-item">
                    <span class="topic-number">03</span>
                    <div class="topic-content">
                      <h3 class="topic-title">US-Canada Relations</h3>
                      <p class="topic-stats">1.2K discussions</p>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 添加视频专题区域 -->
              <div class="video-features">
                <h4 class="section-title">VIDEO FEATURES</h4>
                <div class="video-grid">
                  <article class="video-item" @click="goToArticle('video-1')">
                    <div class="video-thumbnail">
                      <img src="https://s1.mintiny.com/wlake/i/2025/03/31/587d.png" alt="Video Feature" class="video-image" />
                      <div class="video-duration">15:24</div>
                    </div>
                    <div class="video-content">
                      <div class="section-label">DOCUMENTARY</div>
                      <h3 class="article-title">Inside the Tech Revolution</h3>
                      <p class="article-summary">A behind-the-scenes look at how technology is reshaping our world</p>
                    </div>
                  </article>
                  <article class="video-item" @click="goToArticle('video-2')">
                    <div class="video-thumbnail">
                      <img src="https://s1.mintiny.com/wlake/i/2025/03/31/5870.png" alt="Video Feature" class="video-image" />
                      <div class="video-duration">12:38</div>
                    </div>
                    <div class="video-content">
                      <div class="section-label">INTERVIEW</div>
                      <h3 class="article-title">The Future of Work</h3>
                      <p class="article-summary">Leading experts discuss the changing landscape of employment</p>
                    </div>
                  </article>
                </div>
              </div>

              <!-- 添加深度访谈区域 -->
              <div class="interviews">
                <h4 class="section-title">IN-DEPTH INTERVIEWS</h4>
                <div class="interview-list">
                  <article class="interview-item" @click="goToArticle('interview-1')">
                    <img src="https://s1.mintiny.com/wlake/i/2025/03/31/741ph.png" alt="Interview" class="interview-image" />
                    <div class="interview-content">
                      <div class="section-label">TECH LEADERS</div>
                      <h3 class="article-title">AI Ethics and Society</h3>
                      <p class="article-summary">A conversation with leading AI researchers about the future of artificial intelligence</p>
                      <div class="interview-meta">
                        <span class="interview-length">45 MIN READ</span>
                        <span class="interview-type">EXCLUSIVE</span>
                      </div>
                    </div>
                  </article>
                  <article class="interview-item" @click="goToArticle('interview-2')">
                    <img src="https://s1.mintiny.com/wlake/i/2025/03/31/742hb.png" alt="Interview" class="interview-image" />
                    <div class="interview-content">
                      <div class="section-label">CLIMATE ACTION</div>
                      <h3 class="article-title">The Path to Net Zero</h3>
                      <p class="article-summary">Industry leaders share their vision for a sustainable future</p>
                      <div class="interview-meta">
                        <span class="interview-length">35 MIN READ</span>
                        <span class="interview-type">SERIES</span>
                      </div>
                    </div>
                  </article>
                </div>
              </div>

              <!-- 添加数据分析区域 -->
              <div class="data-insights">
                <h4 class="section-title">DATA INSIGHTS</h4>
                <div class="data-grid">
                  <article class="data-card" @click="goToArticle('data-1')">
                    <div class="data-visualization">
                      <img src="https://s1.mintiny.com/wlake/i/2025/03/31/10kxa.png" alt="Data Visualization" class="data-image" />
                    </div>
                    <div class="data-content">
                      <div class="section-label">ECONOMY</div>
                      <h3 class="article-title">Global Trade Patterns</h3>
                      <p class="article-summary">Analyzing the shifts in international commerce</p>
                      <div class="data-meta">
                        <span class="data-source">World Trade Organization</span>
                        <span class="data-update">Updated Today</span>
                      </div>
                    </div>
                  </article>
                  <article class="data-card" @click="goToArticle('data-2')">
                    <div class="data-visualization">
                      <img src="https://s1.mintiny.com/wlake/i/2025/03/31/10lcd.png" alt="Data Visualization" class="data-image" />
                    </div>
                    <div class="data-content">
                      <div class="section-label">TECHNOLOGY</div>
                      <h3 class="article-title">AI Investment Trends</h3>
                      <p class="article-summary">Tracking global investments in artificial intelligence</p>
                      <div class="data-meta">
                        <span class="data-source">Tech Investment Report</span>
                        <span class="data-update">Q1 2025</span>
                      </div>
                    </div>
                  </article>
                </div>
              </div>

              <!-- 添加观点专栏区域 -->
              <div class="opinion-columns">
                <h4 class="section-title">OPINION COLUMNS</h4>
                <div class="columns-grid">
                  <article class="column-item" @click="goToArticle('column-1')">
                    <div class="author-info">
                      <img src="https://s1.mintiny.com/wlake/i/2025/03/31/7450i.png" alt="Author" class="author-image" />
                      <div class="author-details">
                        <h5 class="author-name">Sarah Chen</h5>
                        <p class="author-title">Technology Analyst</p>
                      </div>
                    </div>
                    <div class="column-content">
                      <h3 class="article-title">The Real Cost of AI Development</h3>
                      <p class="article-summary">Why we need to consider the environmental impact of our AI ambitions</p>
                    </div>
                  </article>
                  <article class="column-item" @click="goToArticle('column-2')">
                    <div class="author-info">
                      <img src="https://s1.mintiny.com/wlake/i/2025/03/31/1d0dxk.png" alt="Author" class="author-image" />
                      <div class="author-details">
                        <h5 class="author-name">Michael Rodriguez</h5>
                        <p class="author-title">Economic Policy Expert</p>
                      </div>
                    </div>
                    <div class="column-content">
                      <h3 class="article-title">Rethinking Global Trade</h3>
                      <p class="article-summary">The case for a more sustainable and equitable trading system</p>
                    </div>
                  </article>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Right column - Secondary content -->
        <div class="right-column">
          <!-- Today's Picks -->
          <div class="daily-picks-section">
            <h4 class="section-title">TODAY'S PICKS</h4>
            <div class="daily-picks">
              <article v-for="pick in selectedDailyPicks" :key="pick.id" class="daily-pick" @click="goToArticle(pick.id)">
                <img :src="pick.image" :alt="pick.title" class="daily-pick-image" />
                <div class="daily-pick-content">
                  <div class="section-label">{{ pick.category }}</div>
                  <h3 class="article-title">{{ pick.title }}</h3>
                  <p class="article-summary">{{ pick.summary }}</p>
                </div>
              </article>
            </div>
          </div>

          <article class="food-article" @click="goToArticle('food-1')">
            <img src="https://s1.mintiny.com/wlake/i/2025/03/31/10elz.png
" alt="Biscuits" class="food-image" />
            <!-- <div class="image-credit small">Christopher Testani for The New York Times</div> -->
            <h2 class="article-title">All-Purpose Biscuits That Anyone Can Make (Really!)</h2>
            <p class="article-summary">
              "I'm 78, Southern and these were the best biscuits I've ever made," wrote one reader.
            </p>
            <p class="article-summary">
              Our step-by-step guide breaks down the secret to achieving the perfect flaky layers every time.
            </p>
            <div class="recipe-meta">
              <span class="prep-time">Prep Time: 20 minutes</span>
              <span class="difficulty">Skill Level: Easy</span>
            </div>
          </article>

          <!-- 添加更多中间区域内容 -->
          <div class="mid-content-section">
            <h4 class="section-title">EDITOR'S CHOICE</h4>
            <div class="editors-picks">
              <article class="editor-pick" @click="goToArticle('editor-1')">
                <img src="https://s1.mintiny.com/wlake/i/2025/03/31/1d0dxk.png" alt="Space Exploration" class="editor-image" />
                <div class="editor-content">
                  <div class="section-label">SPACE & SCIENCE</div>
                  <h3 class="article-title">New Horizons in Space Exploration: The Next Decade</h3>
                  <p class="article-summary">
                    From Mars colonies to deep space missions, how humanity is pushing the boundaries of space exploration.
                  </p>
                  <div class="article-meta">8 MIN READ</div>
                </div>
              </article>

              <article class="editor-pick" @click="goToArticle('editor-2')">
                <img src="https://s1.mintiny.com/wlake/i/2025/03/31/1d0mxa.png" alt="AI Development" class="editor-image" />
                <div class="editor-content">
                  <div class="section-label">TECHNOLOGY</div>
                  <h3 class="article-title">The Ethics of AI: Balancing Progress and Responsibility</h3>
                  <p class="article-summary">
                    Leading experts discuss the challenges of developing ethical AI systems in an increasingly automated world.
                  </p>
                  <div class="article-meta">10 MIN READ</div>
                </div>
              </article>
            </div>
          </div>

          <div class="special-report-section">
            <h4 class="section-title">SPECIAL REPORT</h4>
            <article class="special-report" @click="goToArticle('special-1')">
              <img src="https://s1.mintiny.com/wlake/i/2025/03/31/zo78.png" alt="Climate Change Impact" class="special-image" />
              <div class="special-content">
                <div class="section-label">CLIMATE CRISIS</div>
                <h3 class="article-title">Rising Tides: Coastal Cities Face Climate Challenge</h3>
                <p class="article-summary">
                  How major coastal cities are adapting to rising sea levels and increasing environmental pressures.
                </p>
                <div class="article-meta">
                  <span class="read-time">15 MIN READ</span>
                  <span class="article-type">SPECIAL REPORT</span>
                </div>
              </div>
            </article>
          </div>

          <div class="bottom-articles">
            <article class="small-article" @click="goToArticle('small-1')">
              <img src="https://s1.mintiny.com/wlake/i/2025/03/31/10elz.png
" alt="SNL Trump skit" class="small-image" />
              <div class="section-label">ENTERTAINMENT</div>
              <h3 class="article-title">'S.N.L.' Imagines an Oval Office Meeting With Trump, Rubio</h3>
              <p class="article-summary">
                The latest episode tackles political satire with a star-studded cast.
              </p>
            </article>
            <article class="small-article" @click="goToArticle('small-2')">
              <img src="https://s1.mintiny.com/wlake/i/2025/03/31/10elz.png
" alt="Cartoon illustration" class="small-image" />
              <div class="section-label">THE ETHICIST NEWSLETTER</div>
              <h3 class="article-title">My Ex Was Abusive. Should I Warn His New Partner?</h3>
              <p class="article-summary">
                The complex moral questions surrounding intervention in others' relationships.
              </p>
            </article>
          </div>

          <div class="trending-section">
            <h4 class="section-title">TRENDING</h4>
            <div class="trending-articles">
              <article class="trending-article" @click="goToArticle('trending-1')">
                <span class="trending-number">1</span>
                <h3 class="article-title">The Future of AI in Healthcare</h3>
              </article>
              <article class="trending-article" @click="goToArticle('trending-2')">
                <span class="trending-number">2</span>
                <h3 class="article-title">Global Markets React to Tech Sector Shifts</h3>
              </article>
              <article class="trending-article" @click="goToArticle('trending-3')">
                <span class="trending-number">3</span>
                <h3 class="article-title">Climate Change: New Research Reveals Surprising Trends</h3>
              </article>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Bottom content section -->
    <div class="bottom-content container">
      <div class="bottom-grid">
        <!-- Left column -->
        <div class="bottom-left">
          <div class="featured-series">
            <h4 class="section-title">FEATURED SERIES</h4>
            <div class="series-grid">
              <article class="series-item" @click="goToArticle('series-1')">
                <img src="https://s1.mintiny.com/wlake/i/2025/03/31/741ph.png" alt="Climate Change" class="series-image" />
                <div class="series-content">
                  <div class="section-label">CLIMATE CRISIS</div>
                  <h3 class="article-title">The Race to Save Our Planet</h3>
                  <p class="article-summary">A comprehensive look at global efforts to combat climate change</p>
                  <div class="article-meta">8 PART SERIES</div>
                </div>
              </article>
              <article class="series-item" @click="goToArticle('series-2')">
                <img src="https://s1.mintiny.com/wlake/i/2025/03/31/742hb.png" alt="Tech Innovation" class="series-image" />
                <div class="series-content">
                  <div class="section-label">TECHNOLOGY</div>
                  <h3 class="article-title">The Future of AI</h3>
                  <p class="article-summary">Exploring the impact of artificial intelligence on society</p>
                  <div class="article-meta">6 PART SERIES</div>
                </div>
              </article>
            </div>
          </div>

          <div class="opinion-section">
            <h4 class="section-title">OPINION</h4>
            <div class="opinion-grid">
              <article class="opinion-item" @click="goToArticle('opinion-1')">
                <img src="https://s1.mintiny.com/wlake/i/2025/03/31/10kxa.png" alt="Opinion Author" class="opinion-image" />
                <div class="opinion-content">
                  <h3 class="article-title">The Case for Universal Basic Income</h3>
                  <p class="article-summary">As automation advances, we need to rethink our social safety net</p>
                  <div class="author-info">By Sarah Chen</div>
                </div>
              </article>
              <article class="opinion-item" @click="goToArticle('opinion-2')">
                <img src="https://s1.mintiny.com/wlake/i/2025/03/31/7450i.png" alt="Opinion Author" class="opinion-image" />
                <div class="opinion-content">
                  <h3 class="article-title">The Future of Work in the Digital Age</h3>
                  <p class="article-summary">How technology is reshaping our professional landscape</p>
                  <div class="author-info">By Michael Rodriguez</div>
                </div>
              </article>
            </div>
          </div>
        </div>

        <!-- Middle column -->
        <div class="bottom-middle">
          <div class="investigation-section">
            <h4 class="section-title">INVESTIGATION</h4>
            <article class="investigation-item" @click="goToArticle('investigation-1')">
              <img src="https://s1.mintiny.com/wlake/i/2025/03/31/10lcd.png" alt="Investigation" class="investigation-image" />
              <div class="investigation-content">
                <div class="section-label">EXCLUSIVE REPORT</div>
                <h3 class="article-title">Inside the Global Supply Chain Crisis</h3>
                <p class="article-summary">A year-long investigation reveals the complex challenges facing global trade</p>
                <div class="article-meta">
                  <span class="read-time">15 MIN READ</span>
                  <span class="article-type">INVESTIGATION</span>
                </div>
              </div>
            </article>
          </div>

          <div class="multimedia-section">
            <h4 class="section-title">MULTIMEDIA</h4>
            <div class="multimedia-grid">
              <article class="multimedia-item" @click="goToArticle('multimedia-1')">
                <img src="https://s1.mintiny.com/wlake/i/2025/03/31/587d.png" alt="Multimedia" class="multimedia-image" />
                <div class="multimedia-content">
                  <div class="section-label">VIDEO</div>
                  <h3 class="article-title">The Art of Street Photography</h3>
                  <p class="article-summary">A visual journey through urban landscapes</p>
                  <div class="duration">8:45</div>
                </div>
              </article>
              <article class="multimedia-item" @click="goToArticle('multimedia-2')">
                <img src="https://s1.mintiny.com/wlake/i/2025/03/31/5870.png" alt="Multimedia" class="multimedia-image" />
                <div class="multimedia-content">
                  <div class="section-label">INTERACTIVE</div>
                  <h3 class="article-title">Mapping Global Migration Patterns</h3>
                  <p class="article-summary">Explore the movement of people across borders</p>
                  <div class="duration">INTERACTIVE</div>
                </div>
              </article>
            </div>
          </div>
        </div>

        <!-- Right column -->
        <div class="bottom-right">
          <div class="lifestyle-section">
            <h4 class="section-title">LIFESTYLE</h4>
            <div class="lifestyle-grid">
              <article class="lifestyle-item" @click="goToArticle('lifestyle-1')">
                <img src="https://s1.mintiny.com/wlake/i/2025/03/31/1dt8tc.png" alt="Lifestyle" class="lifestyle-image" />
                <div class="lifestyle-content">
                  <div class="section-label">FOOD & CULTURE</div>
                  <h3 class="article-title">The Art of Slow Living</h3>
                  <p class="article-summary">Discover the benefits of mindful living in a fast-paced world</p>
                  <div class="article-meta">5 MIN READ</div>
                </div>
              </article>
              <article class="lifestyle-item" @click="goToArticle('lifestyle-2')">
                <img src="https://s1.mintiny.com/wlake/i/2025/03/31/10lkn.png" alt="Lifestyle" class="lifestyle-image" />
                <div class="lifestyle-content">
                  <div class="section-label">WELLNESS</div>
                  <h3 class="article-title">The Science of Sleep</h3>
                  <p class="article-summary">Understanding the importance of quality rest</p>
                  <div class="article-meta">6 MIN READ</div>
                </div>
              </article>
              <article class="lifestyle-item" @click="goToArticle('lifestyle-3')">
                <img src="https://s1.mintiny.com/wlake/i/2025/03/31/1dtgfo.png" alt="Lifestyle" class="lifestyle-image" />
                <div class="lifestyle-content">
                  <div class="section-label">TRAVEL</div>
                  <h3 class="article-title">Hidden Gems: Off-the-Beaten-Path Destinations</h3>
                  <p class="article-summary">Explore lesser-known travel spots around the world</p>
                  <div class="article-meta">7 MIN READ</div>
                </div>
              </article>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LoginDialog from './LoginDialog.vue'

export default {
  name: 'NewsWebsite',
  components: {
    LoginDialog
  },
  data() {
    return {
      isDarkMode: false,
      showLoginDialog: false,
      isLoggedIn: false,
      selectedDailyPicks: [],
      dailyPicksData: [
        {
          id: 'tech-1',
          category: 'TECH FRONTIER',
          title: 'Quantum Computing Breakthrough: Room-Temperature Qubits Achieved',
          summary: 'A major step forward in making quantum computers practical for everyday use',
          image: 'https://s1.mintiny.com/wlake/i/2025/03/31/1czqwg.png'
        },
        {
          id: 'culture-1',
          category: 'ARTS & CULTURE',
          title: 'New Tang Dynasty Murals Discovered in Dunhuang Caves',
          summary: 'Rare findings offer unprecedented insights into daily life during China\'s golden age',
          image: 'https://s1.mintiny.com/wlake/i/2025/03/31/70047.png'
        },
        {
          id: 'tech-2',
          category: 'TECH FRONTIER',
          title: 'AI Breakthrough in Medical Diagnosis',
          summary: 'New AI system achieves 99% accuracy in early cancer detection',
          image: 'https://s1.mintiny.com/wlake/i/2025/03/31/10056.png'
        },
        {
          id: 'science-1',
          category: 'SCIENCE',
          title: 'Mars Mission Reveals Ancient Lake Beds',
          summary: 'New evidence suggests Mars once had extensive water systems',
          image: 'https://s1.mintiny.com/wlake/i/2025/03/31/1d0dxk.png'
        },
        {
          id: 'environment-1',
          category: 'ENVIRONMENT',
          title: 'Revolutionary Solar Technology Breaks Efficiency Record',
          summary: 'New photovoltaic cells achieve 50% energy conversion efficiency',
          image: 'https://s1.mintiny.com/wlake/i/2025/03/31/1d0mxa.png'
        },
        {
          id: 'health-1',
          category: 'HEALTH',
          title: 'Breakthrough in Alzheimer\'s Treatment',
          summary: 'Novel drug shows promising results in early clinical trials',
          image: 'https://s1.mintiny.com/wlake/i/2025/03/31/zo78.png'
        },
        {
          id: 'finance-1',
          category: 'FINANCE',
          title: 'Global Markets React to AI-Driven Trading Surge',
          summary: 'Artificial intelligence reshapes traditional trading patterns worldwide',
          image: 'https://s1.mintiny.com/wlake/i/2025/03/31/587d.png'
        },
        {
          id: 'innovation-1',
          category: 'INNOVATION',
          title: 'Flying Cars: From Science Fiction to Reality',
          summary: 'First commercial flying car receives regulatory approval in Europe',
          image: 'https://s1.mintiny.com/wlake/i/2025/03/31/5870.png'
        },
        {
          id: 'climate-1',
          category: 'CLIMATE',
          title: 'Arctic Ice Recovery Shows Promising Signs',
          summary: 'New satellite data reveals unexpected changes in polar ice coverage',
          image: 'https://s1.mintiny.com/wlake/i/2025/03/31/741ph.png'
        },
        {
          id: 'tech-1',
          category: 'TECH FRONTIER',
          title: 'Quantum Computing Breakthrough: Room-Temperature Qubits Achieved',
          summary: 'A major step forward in making quantum computers practical for everyday use',
          image: 'https://www.globaltimes.cn/Portals/0/attachment/2025/2025-03-27/20290854-b25c-4cab-b2c1-4e3bbe8b21e3.jpeg'
        },
        {
          id: 'culture-1',
          category: 'ARTS & CULTURE',
          title: 'New Tang Dynasty Murals Discovered in Dunhuang Caves',
          summary: 'Rare findings offer unprecedented insights into daily life during China\'s golden age',
          image: 'https://www.globaltimes.cn/Portals/0/attachment/2025/2025-03-27/8c38f54c-d138-4fcf-ba8d-a8c578967820_s.jpeg'
        },
        {
          id: 'tech-2',
          category: 'TECH FRONTIER',
          title: 'AI Breakthrough in Medical Diagnosis',
          summary: 'New AI system achieves 99% accuracy in early cancer detection',
          image: 'https://www.globaltimes.cn/Portals/0/attachment/2025/2025-03-30/6b305a78-1ff8-460c-8284-7125c78b5efc_s.jpeg'
        },
        {
          id: 'science-1',
          category: 'SCIENCE',
          title: 'Mars Mission Reveals Ancient Lake Beds',
          summary: 'New evidence suggests Mars once had extensive water systems',
          image: 'https://www.globaltimes.cn/Portals/0/attachment/2025/2025-03-27/d1bb962d-6860-4258-83e8-c1de5cb8122f_s.jpeg'
        },
        {
          id: 'innovation-1',
          category: 'INNOVATION',
          title: 'Flying Cars: From Science Fiction to Reality',
          summary: 'First commercial flying car receives regulatory approval in Europe',
          image: 'https://www.globaltimes.cn/Portals/0/attachment/2025/2025-03-27/14cca2d1-d85f-494c-ad5b-c74e4163d928_s.jpeg'
        },
        {
          id: 'climate-1',
          category: 'CLIMATE',
          title: 'Arctic Ice Recovery Shows Promising Signs',
          summary: 'New satellite data reveals unexpected changes in polar ice coverage',
          image: 'https://www.globaltimes.cn/Portals/0/attachment/2025/2025-03-30/0ef634d8-ea6f-49d8-8f72-7a3580fe4712_s.jpeg'
        },   
        {
          id: 'tech-1',
          category: 'TECH FRONTIER',
          title: 'Quantum Computing Breakthrough: Room-Temperature Qubits Achieved',
          summary: 'A major step forward in making quantum computers practical for everyday use',
          image: 'https://www.globaltimes.cn/Portals/0/attachment/2025/2025-03-27/7470eead-3e1c-4fb7-895d-8876d4314a70.jpeg'
        },
        {
          id: 'culture-1',
          category: 'ARTS & CULTURE',
          title: 'New Tang Dynasty Murals Discovered in Dunhuang Caves',
          summary: 'Rare findings offer unprecedented insights into daily life during China\'s golden age',
          image: 'https://www.globaltimes.cn/Portals/0/attachment/2025/2025-04-11/bea29497-8eab-4677-bc14-54613dd4194c_s.jpeg'
        },
        {
          id: 'tech-2',
          category: 'TECH FRONTIER',
          title: 'AI Breakthrough in Medical Diagnosis',
          summary: 'New AI system achieves 99% accuracy in early cancer detection',
          image: 'https://www.globaltimes.cn/Portals/0/attachment/2025/2025-03-27/a2937e41-b53f-4fd3-b92c-247e79b96f78_s.jpeg'
        },
        {
          id: 'science-1',
          category: 'SCIENCE',
          title: 'Mars Mission Reveals Ancient Lake Beds',
          summary: 'New evidence suggests Mars once had extensive water systems',
          image: 'https://www.globaltimes.cn/Portals/0/attachment/2025/2025-04-10/e6b398dd-f042-4e80-a1b9-26a2715982b8_s.jpg'
        },
        {
          id: 'environment-1',
          category: 'ENVIRONMENT',
          title: 'Revolutionary Solar Technology Breaks Efficiency Record',
          summary: 'New photovoltaic cells achieve 50% energy conversion efficiency',
          image: 'https://www.globaltimes.cn/Portals/0/attachment/2025/2025-04-12/546dd460-645c-4934-9000-73782854985a_s.jpeg'
        },
        {
          id: 'health-1',
          category: 'HEALTH',
          title: 'Breakthrough in Alzheimer\'s Treatment',
          summary: 'Novel drug shows promising results in early clinical trials',
          image: 'https://www.globaltimes.cn/Portals/0/attachment/2025/2025-04-10/6a278bfc-7dc1-4d04-82c8-712958d08753_s.jpeg'
        },
      ]
    }
  },
  methods: {
    toggleTheme() {
      this.isDarkMode = !this.isDarkMode;
      if (this.isDarkMode) {
        document.documentElement.setAttribute('theme-mode', 'dark');
      } else {
        document.documentElement.removeAttribute('theme-mode');
      }
    },
    goToArticle(articleId) {
      this.$router.push({
        name: 'article',
        params: { id: articleId }
      });
    },
    handleLoginSuccess() {
      this.isLoggedIn = true;
      this.showLoginDialog = false;
    },
    selectRandomDailyPicks() {
      // 随机打乱数组并选择前五个元素
      const shuffled = [...this.dailyPicksData].sort(() => 0.5 - Math.random());
      this.selectedDailyPicks = shuffled.slice(0, 5);
    }
  },
  mounted() {
    // 检查系统主题偏好
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (prefersDark) {
      this.isDarkMode = true;
      document.documentElement.setAttribute('theme-mode', 'dark');
    }
    
    // 初始选择每日推荐新闻
    this.selectRandomDailyPicks();
  }
}
</script>

<style>
/* Base styles */
body {
  margin: 0;
  padding: 0;
  font-family: 'Times New Roman', Times, serif;
  color: #333;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 15px;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Header styles */
.top-header {
  display: flex;
  padding: 2px 0;
  /* border-bottom: 1px solid #e2e2e2; */
}

.top-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.region-links {
  display: flex;
  gap: 20px;
}

.region-link {
  font-size: 14px;
  font-weight: 500;
}

.region-link.active {
  font-weight: 700;
}

.auth-section {
  display: flex;
  gap: 10px;
}

.subscribe-btn {
  background-color: #567b95 !important;
  border: none !important;
}

.login-btn {
  border-color: #567b95 !important;
  color: #567b95 !important;
}

/* Date and logo section */
.date-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
}

.date-info {
  font-size: 14px;
  line-height: 1.5;
}

.site-logo {
  font-family: "Old English Text MT", "Times New Roman", serif;
  font-size: 42px;
  margin: 0;
  text-align: center;
}

.market-info {
  font-size: 14px;
  text-align: right;
}

.market-up {
  color: #0a8828;
  font-weight: 500;
}

/* Navigation */
.nav-affix {
  width: 100%;
  transition: all 0.3s ease-in-out;
}

.nav-affix.t-affix {
  animation: slideDown 0.3s ease-in-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.main-nav {
  margin: 2px auto;
  border-bottom: 1px solid #e2e2e2;
  width: 100%;
  background: #fff;
  transition: all 0.3s ease-in-out;
}

.nav-affix.t-affix .main-nav {
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.main-nav .t-head-menu {
  display: flex;
  justify-content: center;
  background: transparent;
  margin: 0 auto;
  width: fit-content;
}

.main-nav .t-menu__item {
  font-size: 15px;
  color: #333;
  padding: 12px 16px;
  white-space: nowrap;
}

.main-nav .t-submenu {
  position: relative;
  white-space: nowrap;
}

.main-nav .t-submenu__title {
  font-size: 15px;
  color: #333;
  padding: 12px 16px;
  white-space: nowrap;
}

.main-nav .t-submenu:hover .t-submenu__title,
.main-nav .t-menu__item:hover {
  color: #1a1a1a;
  background-color: rgba(0, 0, 0, 0.02);
}

.main-nav .t-is-active {
  color: #1a1a1a !important;
  font-weight: bold;
}

.main-nav .t-submenu__popup {
  min-width: 160px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.main-nav .t-submenu__popup .t-menu__item {
  padding: 8px 16px;
}

/* Content grid */
.content-grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 30px;
  margin-top: 20px;
  padding: 0 15px;
  border-left: 1px solid #e2e2e2;
}

.main-news-section {
  background: #fff;
  padding: 0 20px;
  position: relative;
}

.main-news-section::after {
  content: '';
  position: absolute;
  right: -15px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #e2e2e2;
}

.news-content {
  display: flex;
  gap: 30px;
  padding: 20px 0;
  border-bottom: 1px solid #e2e2e2;
}

.text-content {
  flex: 1;
  max-width: 60%;
  padding-right: 20px;
  border-right: 1px solid #e2e2e2;
}

.image-content {
  flex: 1;
  max-width: 40%;
}

.featured-image {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.main-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

.image-credit {
  position: absolute;
  left: 0;
  right: 0;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  margin: 0;
  z-index: 1;
}

.image-credit {
  top: 0;
  font-size: 12px;
  text-align: center;
  padding: 12px 16px;
}

.image-caption {
  position: absolute;
  left: 0;
  right: 0;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  margin: 0;
  z-index: 1;
}

.image-caption {
  bottom: 16px;
  font-size: 14px;
  border-radius: 4px;
  margin: 0 16px;
  width: auto;
  left: 0;
  right: 0;
}

/* Article styles */
.main-article,
.secondary-article,
.food-article,
.small-article {
  cursor: pointer;
  transition: all 0.3s ease;
}

.main-article:hover,
.secondary-article:hover,
.food-article:hover,
.small-article:hover {
  opacity: 0.8;
}

.main-article {
  margin-bottom: 30px;
}

.article-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.3;
}

.article-summary {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 15px;
  color: #333;
}

.article-meta {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.secondary-article {
  margin: 25px 0;
  padding-bottom: 25px;
  border-bottom: 1px solid #e2e2e2;
}

.secondary-article .article-title {
  font-size: 20px;
}

/* Topic tags */
.topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 25px 0;
  padding-bottom: 25px;
  border-bottom: 1px solid #e2e2e2;
}

.topic-tag {
  font-size: 14px;
  color: #333;
  padding: 5px 0;
}

.topic-tag:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  background-color: #ccc;
  margin-left: 10px;
  vertical-align: middle;
}

/* Food article */
.food-article {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e2e2e2;
}

.food-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Bottom articles */
.bottom-articles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.small-article {
  position: relative;
  padding-bottom: 20px;
}

.small-article:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #e2e2e2;
}

.small-image {
  width: 100%;
  height: auto;
  display: block;
}

.section-label {
  font-size: 12px;
  font-weight: 500;
  color: #666;
  margin-top: 5px;
}

.small-article .article-title {
  font-size: 18px;
  margin-top: 5px;
}

/* 添加主题切换按钮样式 */
.theme-btn {
  padding: 8px !important;
  margin-right: 8px;
  transition: all 0.3s ease;
}

.theme-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

[theme-mode="dark"] .theme-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 暗色模式样式覆盖 */
[theme-mode="dark"] {
  background-color: #1a1a1a;
  color: #fff;
}

[theme-mode="dark"] .main-nav {
  background: #242424;
}

[theme-mode="dark"] .main-nav .t-menu__item,
[theme-mode="dark"] .main-nav .t-submenu__title {
  color: #fff;
}

[theme-mode="dark"] .main-nav .t-submenu:hover .t-submenu__title,
[theme-mode="dark"] .main-nav .t-menu__item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
}

[theme-mode="dark"] .main-nav .t-submenu__popup {
  background: #242424;
}

[theme-mode="dark"] .nav-affix.t-affix .main-nav {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[theme-mode="dark"] .login-btn {
  border-color: #fff !important;
  color: #fff !important;
}

[theme-mode="dark"] .article-title,
[theme-mode="dark"] .article-summary {
  color: #fff;
}

[theme-mode="dark"] .topic-tag {
  color: #fff;
}

[theme-mode="dark"] .date-info,
[theme-mode="dark"] .market-info,
[theme-mode="dark"] .site-logo {
  color: #fff;
}

[theme-mode="dark"] .region-link {
  color: #fff;
}

[theme-mode="dark"] .search-section .t-icon {
  color: #fff;
}

[theme-mode="dark"] .article-meta {
  color: #999;
}

[theme-mode="dark"] .section-label {
  color: #aaa;
}

[theme-mode="dark"] .image-credit {
  color: #aaa;
}

[theme-mode="dark"] .topic-tag:not(:last-child)::after {
  background-color: #444;
}

[theme-mode="dark"] .t-divider {
  border-color: #333;
}

[theme-mode="dark"] .top-header {
  background-color: #242424;
}

[theme-mode="dark"] body {
  background-color: #1a1a1a;
}

[theme-mode="dark"] .content-grid,
[theme-mode="dark"] .main-news-section::after,
[theme-mode="dark"] .text-content,
[theme-mode="dark"] .news-content,
[theme-mode="dark"] .secondary-article,
[theme-mode="dark"] .topic-tags,
[theme-mode="dark"] .right-column,
[theme-mode="dark"] .food-article,
[theme-mode="dark"] .small-article:not(:last-child)::after,
[theme-mode="dark"] .trending-section {
  border-color: #333;
}

@media (max-width: 992px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
  
  .news-content {
    flex-direction: column;
  }
  
  .text-content {
    max-width: 100%;
    padding-right: 0;
    border-right: none;
  }
  
  .image-content {
    max-width: 100%;
  }

  .small-article:not(:last-child)::after {
    display: none;
  }
}

/* 新增和修改的样式 */
.image-caption {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
  line-height: 1.4;
}

.recipe-meta {
  display: flex;
  gap: 15px;
  margin-top: 10px;
  font-size: 13px;
  color: #666;
}

.trending-section {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e2e2e2;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}

.trending-articles {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.trending-article {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.trending-number {
  font-size: 24px;
  font-weight: 700;
  color: #666;
  line-height: 1;
}

.trending-article .article-title {
  font-size: 16px;
  margin: 0;
}

/* 暗色模式修复 */
[theme-mode="dark"] {
  background-color: #1a1a1a;
}

[theme-mode="dark"] .main-content {
  background-color: #1a1a1a;
}

[theme-mode="dark"] .image-caption,
[theme-mode="dark"] .recipe-meta,
[theme-mode="dark"] .trending-number,
[theme-mode="dark"] .section-title {
  color: #999;
}

[theme-mode="dark"] .main-news-section,
[theme-mode="dark"] .right-column {
  background-color: #1a1a1a;
}

[theme-mode="dark"] .article-summary {
  color: #ccc;
}

[theme-mode="dark"] .trending-article .article-title {
  color: #fff;
}

[theme-mode="dark"] .small-article .article-summary {
  color: #ccc;
}

[theme-mode="dark"] .content-grid,
[theme-mode="dark"] .main-news-section::after,
[theme-mode="dark"] .text-content,
[theme-mode="dark"] .news-content,
[theme-mode="dark"] .secondary-article,
[theme-mode="dark"] .topic-tags,
[theme-mode="dark"] .right-column,
[theme-mode="dark"] .food-article,
[theme-mode="dark"] .small-article:not(:last-child)::after,
[theme-mode="dark"] .trending-section {
  border-color: #333;
}

/* 在已有的样式后添加 */
.avatar-wrapper {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.user-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[theme-mode="dark"] .avatar-wrapper {
  border: 1px solid #333;
}

/* 新增和修改的样式 */
.daily-picks-section {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e2e2e2;
}

.daily-picks {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.daily-pick {
  display: flex;
  gap: 15px;
  cursor: pointer;
  transition: opacity 0.3s ease;
  height: 80px;
  padding: 8px;
  border-radius: 6px;
}

.daily-pick:hover {
  opacity: 0.8;
  background: rgba(0, 0, 0, 0.03);
}

.daily-pick-image {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.daily-pick-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  overflow: hidden;
}

.daily-pick .section-label {
  font-size: 12px;
  font-weight: 500;
  color: #567b95;
  margin-bottom: 4px;
}

.daily-pick .article-title {
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.daily-pick .article-summary {
  font-size: 14px;
  line-height: 1.4;
  color: #666;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 暗色模式样式 */
[theme-mode="dark"] .daily-picks-section {
  border-color: #333;
}

[theme-mode="dark"] .daily-pick .section-label {
  color: #7ba7c7;
}

[theme-mode="dark"] .daily-pick .article-summary {
  color: #999;
}

/* 轮播图样式 */
.featured-swiper {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.featured-swiper .t-swiper__navigation-button {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.featured-swiper .t-swiper__navigation-button:hover {
  background: #fff;
  transform: scale(1.1);
}

.featured-swiper .t-swiper__navigation-button--prev {
  left: 16px;
}

.featured-swiper .t-swiper__navigation-button--next {
  right: 16px;
}

.featured-swiper .t-swiper__navigation-inner {
  color: #333;
}

.featured-swiper .featured-image {
  position: relative;
  margin-bottom: 0;
}

.featured-swiper .main-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.featured-swiper .image-credit,
.featured-swiper .image-caption {
  position: absolute;
  left: 0;
  right: 0;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  margin: 0;
  z-index: 1;
}

.featured-swiper .image-credit {
  top: 0;
  font-size: 12px;
  text-align: center;
  padding: 12px 16px;
}

.featured-swiper .image-caption {
  bottom: 16px;
  font-size: 14px;
  border-radius: 4px;
  margin: 0 16px;
  width: auto;
  left: 0;
  right: 0;
}

/* 暗色模式适配 */
[theme-mode="dark"] .featured-swiper .t-swiper__navigation-button {
  background: rgba(0, 0, 0, 0.6);
}

[theme-mode="dark"] .featured-swiper .t-swiper__navigation-button:hover {
  background: rgba(0, 0, 0, 0.8);
}

[theme-mode="dark"] .featured-swiper .t-swiper__navigation-inner {
  color: #fff;
}

/* 深度分析区域样式 */
.analysis-section {
  margin: 40px 0;
  padding: 30px 0;
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
}

.analysis-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.analysis-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e2e2e2;
}

.analysis-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.analysis-content {
  margin-bottom: 20px;
}

.analysis-content .section-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #567b95;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.analysis-content .article-title {
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 12px;
  color: #1a1a1a;
}

.analysis-content .article-summary {
  font-size: 15px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 16px;
}

.analysis-content .article-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: #666;
}

.article-type {
  color: #567b95;
  font-weight: 500;
}

.analysis-stats {
  display: flex;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid #e2e2e2;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

/* 暗色模式适配 */
[theme-mode="dark"] .analysis-card {
  background: #242424;
  border-color: #333;
}

[theme-mode="dark"] .analysis-content .article-title {
  color: #fff;
}

[theme-mode="dark"] .analysis-content .article-summary {
  color: #999;
}

[theme-mode="dark"] .stat-number {
  color: #fff;
}

[theme-mode="dark"] .stat-label {
  color: #999;
}

[theme-mode="dark"] .analysis-stats {
  border-color: #333;
}

[theme-mode="dark"] .analysis-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

@media (max-width: 992px) {
  .analysis-grid {
    grid-template-columns: 1fr;
  }
  
  .analysis-card {
    padding: 20px;
  }
  
  .analysis-stats {
    flex-wrap: wrap;
  }
}

/* 编辑推荐区域样式 */
.mid-content-section {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e2e2e2;
}

.editors-picks {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.editor-pick {
  display: flex;
  gap: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 16px;
  border-radius: 8px;
  background: #f8f9fa;
}

.editor-pick:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.editor-image {
  width: 200px;
  height: 140px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.editor-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.editor-content .article-title {
  font-size: 20px;
  margin: 8px 0;
}

.editor-content .article-summary {
  font-size: 15px;
  line-height: 1.5;
  color: #666;
  margin-bottom: 12px;
}

/* 特别报道区域样式 */
.special-report-section {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e2e2e2;
}

.special-report {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
  background: #f8f9fa;
}

.special-report:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.special-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.special-content {
  padding: 20px;
}

.special-content .article-title {
  font-size: 24px;
  margin: 8px 0 12px;
}

.special-content .article-summary {
  font-size: 16px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 16px;
}

.special-content .article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.special-content .article-type {
  color: #567b95;
  font-weight: 500;
}

/* 暗色模式适配 */
[theme-mode="dark"] .editor-pick {
  background: #242424;
}

[theme-mode="dark"] .editor-content .article-summary {
  color: #999;
}

[theme-mode="dark"] .special-report {
  background: #242424;
}

[theme-mode="dark"] .special-content .article-summary {
  color: #999;
}

[theme-mode="dark"] .editor-pick:hover,
[theme-mode="dark"] .special-report:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .editor-pick {
    flex-direction: column;
  }
  
  .editor-image {
    width: 100%;
    height: 200px;
  }
}

/* 添加新的样式 */
.related-news {
  margin-top: 24px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.related-news-grid {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.related-news-item {
  padding: 16px;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.related-news-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.related-news-content .article-title {
  font-size: 16px;
  margin-bottom: 8px;
}

.related-news-content .article-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #666;
}

.article-type {
  color: #567b95;
  font-weight: 500;
}

.hot-topics {
  margin-top: 24px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.topic-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.topic-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.topic-item:hover {
  transform: translateX(4px);
  background: #f0f2f5;
}

.topic-number {
  font-size: 24px;
  font-weight: 700;
  color: #567b95;
  opacity: 0.8;
}

.topic-content {
  flex: 1;
}

.topic-title {
  font-size: 15px;
  margin: 0 0 4px;
  color: #333;
}

.topic-stats {
  font-size: 12px;
  color: #666;
  margin: 0;
}

/* 暗色模式适配 */
[theme-mode="dark"] .related-news,
[theme-mode="dark"] .hot-topics {
  background: #242424;
}

[theme-mode="dark"] .related-news-item,
[theme-mode="dark"] .topic-item {
  background: #1a1a1a;
}

[theme-mode="dark"] .topic-item:hover {
  background: #2a2a2a;
}

[theme-mode="dark"] .topic-title {
  color: #fff;
}

[theme-mode="dark"] .topic-stats,
[theme-mode="dark"] .topic-number {
  color: #999;
}

[theme-mode="dark"] .related-news-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .related-news,
  .hot-topics {
    padding: 16px;
  }
  
  .related-news-grid {
    grid-template-columns: 1fr;
  }
  
  .topic-item {
    padding: 10px;
  }
}

/* Bottom content styles */
.bottom-content {
  margin-top: 40px;
  padding: 20px 0;
  border-top: 1px solid #e2e2e2;
}

.bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}

/* Left column styles */
.series-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 30px;
}

.series-item {
  cursor: pointer;
  transition: all 0.3s ease;
}

.series-item:hover {
  transform: translateY(-2px);
}

.series-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
}

.series-content .article-title {
  font-size: 18px;
  margin: 8px 0;
}

.opinion-grid {
  display: grid;
  gap: 20px;
}

.opinion-item {
  display: flex;
  gap: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.opinion-item:hover {
  opacity: 0.8;
}

.opinion-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.opinion-content {
  flex: 1;
}

.author-info {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
}

/* Middle column styles */
.investigation-item {
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 30px;
}

.investigation-item:hover {
  transform: translateY(-2px);
}

.investigation-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
}

.multimedia-grid {
  display: grid;
  gap: 20px;
}

.multimedia-item {
  cursor: pointer;
  transition: all 0.3s ease;
}

.multimedia-item:hover {
  transform: translateY(-2px);
}

.multimedia-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
}

.duration {
  font-size: 12px;
  color: #567b95;
  font-weight: 500;
}

/* Right column styles */
.lifestyle-grid {
  display: grid;
  gap: 20px;
}

.lifestyle-item {
  cursor: pointer;
  transition: all 0.3s ease;
}

.lifestyle-item:hover {
  transform: translateY(-2px);
}

.lifestyle-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* Dark mode styles */
[theme-mode="dark"] .bottom-content {
  border-color: #333;
}

[theme-mode="dark"] .author-info {
  color: #999;
}

[theme-mode="dark"] .duration {
  color: #7ba7c7;
}

/* Responsive styles */
@media (max-width: 992px) {
  .bottom-grid {
    grid-template-columns: 1fr;
  }
  
  .series-image,
  .investigation-image,
  .multimedia-image,
  .lifestyle-image {
    height: 240px;
  }
}

@media (max-width: 768px) {
  .opinion-item {
    flex-direction: column;
  }
  
  .opinion-image {
    width: 100%;
    height: 200px;
    border-radius: 8px;
  }
}

/* 新增样式 */
.featured-insights {
  margin: 30px 0;
  padding: 30px 0;
  border-bottom: 1px solid #e2e2e2;
}

.insights-grid {
  display: grid;
  gap: 24px;
}

.insight-card {
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.insight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.insight-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.insight-content {
  padding: 20px;
}

.market-updates {
  margin: 30px 0;
  padding: 30px 0;
  border-bottom: 1px solid #e2e2e2;
}

.market-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.market-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
}

.market-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.market-name {
  font-weight: 600;
  font-size: 16px;
}

.market-change {
  font-weight: 500;
  font-size: 14px;
}

.market-change.positive {
  color: #0a8828;
}

.market-change.negative {
  color: #e11d48;
}

.chart-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
}

.tech-trends {
  margin: 30px 0;
  padding: 30px 0;
  border-bottom: 1px solid #e2e2e2;
}

.trends-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.trend-card {
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.trend-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.trend-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.trend-content {
  padding: 16px;
}

.trend-content .article-title {
  font-size: 16px;
  margin-bottom: 8px;
}

.trend-content .article-summary {
  font-size: 14px;
  line-height: 1.4;
}

/* 暗色模式适配 */
[theme-mode="dark"] .insight-card,
[theme-mode="dark"] .market-card,
[theme-mode="dark"] .trend-card {
  background: #242424;
}

[theme-mode="dark"] .market-name {
  color: #fff;
}

[theme-mode="dark"] .insight-card:hover,
[theme-mode="dark"] .trend-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .market-grid,
  .trends-grid {
    grid-template-columns: 1fr;
  }
  
  .insight-image,
  .trend-image {
    height: 200px;
  }
}

/* 深度报道区块样式 */
.in-depth-reports {
  margin: 40px 0;
  padding: 40px 0;
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
}

.reports-grid {
  display: grid;
  gap: 30px;
  margin-bottom: 30px;
}

.report-card {
  background: #f8f9fa;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.report-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.report-card.large {
  grid-column: 1 / -1;
}

.report-card.large .report-image {
  height: 400px;
}

.report-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.report-content {
  padding: 24px;
}

.sub-reports {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.key-findings {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 30px;
}

.findings-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
}

.findings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.finding-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.finding-number {
  font-size: 24px;
  font-weight: 700;
  color: #567b95;
  line-height: 1;
}

.finding-content h6 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #333;
}

.finding-content p {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

/* 暗色模式适配 */
[theme-mode="dark"] .report-card,
[theme-mode="dark"] .key-findings {
  background: #242424;
}

[theme-mode="dark"] .findings-title,
[theme-mode="dark"] .finding-content h6 {
  color: #fff;
}

[theme-mode="dark"] .finding-content p {
  color: #999;
}

[theme-mode="dark"] .finding-number {
  color: #7ba7c7;
}

/* 响应式布局 */
@media (max-width: 992px) {
  .sub-reports {
    grid-template-columns: 1fr;
  }
  
  .findings-grid {
    grid-template-columns: 1fr;
  }
  
  .report-card.large .report-image {
    height: 300px;
  }
}

/* 视频专题区域样式 */
.video-features {
  margin-top: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.video-grid {
  display: grid;
  gap: 20px;
  margin-top: 16px;
}

.video-item {
  cursor: pointer;
  transition: all 0.3s ease;
}

.video-item:hover {
  transform: translateY(-2px);
}

.video-thumbnail {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.video-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.video-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.video-content {
  padding: 16px 0;
}

/* 深度访谈区域样式 */
.interviews {
  margin-top: 30px;
}

.interview-list {
  display: grid;
  gap: 24px;
}

.interview-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.interview-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.interview-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.interview-content {
  flex: 1;
}

.interview-meta {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  font-size: 12px;
  color: #666;
}

.interview-type {
  color: #567b95;
  font-weight: 500;
}

/* 数据分析区域样式 */
.data-insights {
  margin-top: 30px;
}

.data-grid {
  display: grid;
  gap: 20px;
}

.data-card {
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.data-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.data-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.data-content {
  padding: 16px;
}

.data-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
  margin-top: 12px;
}

/* 观点专栏区域样式 */
.opinion-columns {
  margin-top: 30px;
}

.columns-grid {
  display: grid;
  gap: 20px;
}

.column-item {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.column-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.author-image {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.author-details {
  flex: 1;
}

.author-name {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.author-title {
  font-size: 12px;
  color: #666;
  margin: 4px 0 0;
}

/* 暗色模式适配 */
[theme-mode="dark"] .video-features,
[theme-mode="dark"] .interview-item,
[theme-mode="dark"] .data-card,
[theme-mode="dark"] .column-item {
  background: #242424;
}

[theme-mode="dark"] .video-duration {
  background: rgba(255, 255, 255, 0.2);
}

[theme-mode="dark"] .interview-meta,
[theme-mode="dark"] .data-meta,
[theme-mode="dark"] .author-title {
  color: #999;
}

[theme-mode="dark"] .interview-type {
  color: #7ba7c7;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .interview-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .interview-image {
    width: 100px;
    height: 100px;
  }

  .interview-meta {
    justify-content: center;
  }
}
</style>